```html
<script setup>
  import * as colorPicker from "@zag-js/color-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed, ref } from "vue"

  const service = useMachine(colorPicker.machine, {
    id: "1",
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = computed(() => colorPicker.connect(service, normalizeProps))

  const presets = ref(["#ff0000", "#00ff00", "#0000ff"])
</script>

<template>
  <div v-bind="api.getRootProps()">
    // ...
    <div v-bind="api.getPositionerProps()">
      <div v-bind="api.getContentProps()">
        <div v-bind="api.getSwatchGroupProps()">
          <template v-for="preset in presets">
            <button v-bind="api.getSwatchTriggerProps({ value: preset })">
              <div v-bind="api.getTransparencyGridProps({ size: '4px' })" />
              <div v-bind="api.getSwatchProps({ value: preset })" />
            </button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
```
